<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <!--
        <link rel="stylesheet" href="../css/selector.css">
    -->
    <style>
        .contentBox{
            border:1px solid red;
            overflow: hidden;
            outline: 1px solid yellow;
            margin: 0px auto 50px;
            width: 300px;
            height: 200px;
        }
        .borderBox{
            margin-top: 50px;
            border: 1px solid blue;
            width: 100px;
            height: 100px;
        }
        .selected{
            border: 1px solid red;
            background-color: yellow;
        }
    </style>
    <script>
        let btnQuery = function () {
            let cssText = document.querySelector("#cssSelectorText").value;
            let mainNode = document.getElementsByTagName("main")[0];
            let nodes = mainNode.querySelectorAll(cssText); //  返回一个类数组
            let deleteNodes = mainNode.querySelectorAll("[class~=selected]");
            Array.from(deleteNodes).forEach((item) => {
                item.classList.remove("selected");
            });
            /*这种方法效率较低
            let allNodes=mainNode.querySelectorAll("*");    //返回文档中的所有标签
            //流式操作+lambda表达式
            Array.form(allNodes).filter((item)=>{
                item.classList.contains("selected")
            }).forEach((item)=>{
                item.classList.remove("selected");
            });
            */
            Array.from(nodes).forEach((item) => {
                item.classList.add("selected");
            });
        }
        //加载时机：DOM树加载完成后执行
        function init() {
            document.getElementById("btn_query").addEventListener("click", btnQuery, false);
            document.getElementById("cssSelectorText").addEventListener("keydown",(event)=>{
                if(event.keyCode==13){
                    btnQuery();
                }
            },false);
        }
        window.addEventListener("load", init, false);
        //执行时机：DOM树加载完成前
    </script>
</head>

<body>
    <section>
        CSS选择器查询：
        <input type="search" name="cssSelectorText" id="cssSelectorText">
        <button type="button" id="btn_query">查询</button>
    </section>
    <hr>
    <!-- 选择器举例 -->
    <main>
        <section>
            <h2 id="update">简单标签</h2>
            <input type="text">
            <figure>
                <img class="borderColor" id="logo" src="../img/login_logo.jpg" alt="logo" title="一个小孩">
                <figcaption>一个小朋友</figcaption>
                <p>我是来玩耍的。</p>
            </figure>
            <p>我是来读书的。</p>
            <button>wasd</button>
            <p>我是来写作的。</p>
            <div>我是一个块级标签</div>
            <img hidden id="test" src="../img/ooopic_1506740284.png">
            <p>我是来凑数的。</p>
            <a class="borderColor" href="#">这是一个超链接</a>我不是一个超链接
            <div>我是一个p标签中的div标签</div>
            <p>
                <nav>我是一个小导航</nav>
                <a href="#">我是一个p标签中的a标签</a>
            </p>
            <p>我是来凑数的。</p>
        </section>
        <hr>
        <section>
            <h2>盒子属性</h2>
            <div class="contentBox" style="box-sizing:content-box">
                contentBoxcontentBoxcontentBoxcontentBoxcontentBox
            </div>
            <div class="borderBox" style="box-sizing:border-box">
                IEBOX
            </div>
        </section>
        <section>
            <pre>
            北斗七星高，
            哥舒夜带刀。
        </pre>
            <ol style="padding-left:0px;list-style-position: inside">
                <li>熊大</li>
                <li>光头强</li>
                <li>熊二</li>
            </ol>
            <ul>
                <li>熊大</li>
                <a>吉吉</a>
                <li>光头强</li>
                <li>熊二</li>
            </ul>
            <dl>
                <dt>张居正</dt>
                <dd>明朝万历年间的店铺，……</dd>
            </dl>
        </section>
    </main>
    空格&nbsp;<br>
    大于&gt;<br>
    小于&lt;<br>
    引号&quot;<br>
    版权&copy;
</body>

</html>